<!--
 * @Date: 2024-09-13 14:27:02
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-09-19 09:35:12
 * @Description: 
-->
<template>
  <div class="sheet-tabs">
    <div class="icon-search-warp">
      <el-input :="inputAttrs" :prefixIcon="Search" v-model="iconState.searchIcon" ></el-input>
    </div>
    <el-tabs v-model="tabsState.tabActive">
      <el-tab-pane lazy label="ali" name="ali">
        <template #label><div class="sheet-tab-label">ali 图标</div></template>
        <SheetsPanel
          :list="iconState.iconSheet.ali"
          :active-icon="activeClass"
          :search-icon="iconState.searchIcon"
          @on-seleted="onIconItemkClick"
        >
        </SheetsPanel>
      </el-tab-pane>
      <el-tab-pane lazy label="ele" name="ele">
        <template #label><div class="sheet-tab-label">ele 图标</div></template>
        <SheetsPanel
          :list="iconState.iconSheet.ele"
          :active-icon="activeClass"
          :search-icon="iconState.searchIcon"
          @on-seleted="onIconItemkClick"
        >
        </SheetsPanel>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { onBeforeMount, reactive, watch } from 'vue';
// import { ElTabs, ElTabPane, ElInput } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import SheetsPanel from './sheetsPanel.vue'

import iconfontSheet from '../../cfg/icon-config.js'

const emits = defineEmits([
  'onSeleted'
])
const props = defineProps({
  activeClass: { type: String, default: '' }
})

// 标签页数据集
const tabsState = reactive({
  tabActive: 'ali',
})
// 图标数据集
const iconState = reactive({
  iconSheet: { ali: [], ele: [] },
  searchIcon: '',
})
const inputAttrs = reactive({
  size: 'default',
  style: {
    width: '150px',
  },
  clearable: true,
  placeholder: '请输入搜索图标'
})
/**
 * 加载图标数据集
 */
const loadIconfont = () => {
  iconState.iconSheet['ali'] = iconfontSheet.ali()
  iconState.iconSheet['ele'] = iconfontSheet.ele()
}
/**
 * 图标点击触发
 * 
 * @param item 点击的图标信息
 */
const onIconItemkClick = (value, item) => {
  emits('onSeleted', value, item)
}

watch(
  () => props.activeClass,
  (nv) => {
    if (!nv) return
    if (nv.includes('-icon-')) {
      tabsState.tabActive = 'ali'
    }
    if (nv.includes('el-')) {
      tabsState.tabActive = 'ele'
    }
  },
  { deep: false, immediate: false }
)

onBeforeMount(() => {
  loadIconfont()
})

</script>

<style lang="scss" scoped>
.sheet-tabs {
  position: relative;
  :deep(.el-tabs__header) {
    margin-bottom: 0;
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid var(--el-border-color-light);
    margin: 0 !important;
  }
  :deep(.el-tabs__item) {
    padding: 0;
  }
}
.sheet-tab-label {
  padding: 0 8px;
}
.icon-search-warp {
  position: absolute;
  top: 4px;
  left: 8px;
  z-index: 9999;
}
</style>
